<template>
<div>
    <meta title="系统套餐管理"></meta>
    <ManageTable border stripe :rowKey="tableData.rowKey" :columns="tableData.columns" :data="tableData.data" :btnGroup="tableData.btnGroup" :page="tableData.page" @on-page-change="onPageChange">

    </ManageTable>

</div>
</template>

<script>
import then from 'thenjs';
import moment from 'moment';
import AppFrame from '../../../libs/app-frame';
import ManageTable from '../../../components/manage-table';

export default {
    data: function() {
        return {
            tableData: {
                rowKey: 'RuleID',
                columns: [{
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        able:'禁止删除'
                    },

                    {
                        title: '套餐',
                        key: 'RuleName',
                        width: 180,
                        filterKey: 'RuleName',
                        sortable: 'custom',
                        filterType: 'text'
                    },
                    {
                        title: '所属系统',
                        key: 'RulePlatformName',
                        width: 250,
                        filterKey: "RulePlatformID",
                        filterType: "check",
                        filterOptions: [],
                        filterMultiple: true
                    },
                    {
                        title: '备注',
                        key: 'RuleInfo'
                    },
                    {
                        title: '创建时间',
                        width: 180,
                        key: 'CreateTime',
                        filterType: 'CreateTime',
                        sortable: 'desc'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 80,
                        align: 'center',
                        able:'禁止编辑',
                        render: (h, params) => {
                            return h('div', [
                                
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.$router.push("/Manage/System/platform/platform-rule-edit?RuleID=" + params.row.RuleID);
                                        }
                                    }
                                }, '编辑')
                            ]);
                        }
                    }
                ],
                data: [],
                btnGroup: [{
                    key: 'delBtn',
                    text: '删除所选',
                    type: 'primary',
                    url: '/manage-api/system/platform-rule/del',
                    isShow: true,
                    icon: 'trash-a',
                    loading: false,
                    able:'禁止删除',
                    actionText: '确定要删除所选吗?'
                }],
                page: {
                    total: 0,
                    current: 1,
                    pageSize: 20
                }
            },
            QueryModel: {
                Sort: null
            }
        }
    },
    components: {
        ManageTable
    },
    created: function() {
        
        this.setDefaultData();
        this.find();
//alert("aa" + JSON.stringify(this.$route.query));
    },
    watch: {
        '$route': function() { //当路由改变时
            //alert( JSON.stringify(this.$route.query));
            this.setDefaultData();
            this.find();
        }

    },
    methods: {
        setDefaultData: function() {
            this.tableData.page.current = Number(this.$route.query.CurPage) || 1;
            this.tableData.page.pageSize = Number(this.$route.query.PageSize) || 20;
        },
       

        find: function(curPage, pageSize) {
            try {
                let self = this;
                let PostData = {};
                if (this.$route.query) PostData = this.$route.query;
                
                PostData.CurPage = this.tableData.page.current;
                PostData.PageSize = this.tableData.page.pageSize;

                AppFrame.Http.Post("/manage-api/system/platform-rule/getItems", PostData).then(function(Ret) {
                    self.tableData.page.total = Ret.Data.PlatformRuleItems.RsCount;
                    self.tableData.page.current = Ret.Data.PlatformRuleItems.CurPage;
                    self.tableData.page.pageSize = Ret.Data.PlatformRuleItems.PageSize;
                    
                    //------------------
                    self.tableData.data.splice(0, self.tableData.data.length);
                    Ret.Data.PlatformRuleItems.DataList.forEach(function(item) {
                        self.tableData.data.push(item);
                    });
                    //----填充列的过滤属性
                        self.tableData.columns.forEach(function(col) {
                            if (col.key == "RulePlatformName") {
                                col.filterOptions.splice(0, col.filterOptions.length);
                                Ret.Data.PlatformItems.forEach(item => {
                                    col.filterOptions.push({
                                        label: item.IP_Name,
                                        value: item.IP_ID
                                    });
                                });
                            }
                        });

                    // console.log(Ret.Data);
                }).catch(function(err) {
                    console.log(err);
                    self.$Message.error(JSON.stringify(err));
                })
            } catch (err) {

            }

        },
         onPageChange: function(page) {
            if (page.current !== this.tableData.page.current) {

            }
        }
    }
}
</script>

<style scoped>

</style>